<template>

	<view class="flex-col page">
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col group_4">
				<view class="flex-col section_1">
					<text class="text_1">你的房屋位置</text>
					<view class="flex-col group_5">
						<view class="justify-between group_6">
							<shop-region :area='defaultArea' v-model="area"></shop-region>
							<image :src="imgUrl+'16557826946831323061.png'" class="image_7" />
						</view>
						<text class="text_3">详细地址</text>
					</view>
					<view class="flex-col group_7">
						<view class="justify-between group_8">
							<u--input type="text" placeholder="请填写详细地址(具体到门牌号)" v-model="form.position" border="none"
								clearable></u--input>
						</view>
						<text class="text_3">你的房屋面积</text>
					</view>
					<view class="flex-col group_7">
						<view class="justify-between group_8">
							<u--input type="number" placeholder="请输入您的房屋面积" v-model="form.roomArea" border="none"
								clearable></u--input>
							<text class="text_5">m²</text>
						</view>
						<text class="text_6">请填写房本中的建筑面积</text>
					</view>
				</view>
				<view class="flex-col section_2">
					<view class="flex-row">
						<image :src="imgUrl+'16557826792503103103.png'" class="image_8" />
						<text class="text_7">房屋类型</text>
					</view>
					<view class="flex-col group_10">
						<view class="flex-row u-flex-wrap">
							<view class="flex-col items-center" style="margin-bottom: 20rpx;"
								:class="item.roomTypeId==roomTypeId?'text-wrapper':'text-wrapper_1'"
								v-for="(item,index) in rooms" :key="index" @click="clickItem(item.roomTypeId)">
								{{item.roomTypeName}}
							</view>
						</view>

					</view>
				</view>
				<view class="flex-col section_3">
					<view class="flex-row">
						<image :src="imgUrl+'16557826792503103103.png'" class="image_8" />
						<text class="text_17">房屋面积复诊图片</text>
					</view>
					<view class="group_14">
						<shop-upload :maxCount="9" :fileList="fileList" @success="success" @del="delectPic">
						</shop-upload>
					</view>
					<text class="text_18">*注：仅需上传带有房屋坐落位置及建筑面积的图片，用于平台复核 服务地点和准确面积。</text>
				</view>

				<view>
					<view class="group">
						<view class="flex-col">
							<view class="flex-col group_2">
								<!-- <text class="text_2">注：展示最终确认的施工图</text> -->
							</view>

						</view>

					</view>

				</view>

			</view>
		</scroll-view>
		<view class="u-p-l-20 u-p-r-20 fixed">
			<view class="flex-col items-center button" @click="submits"><text class="text_19">完成</text></view>
		</view>

	</view>
</template>

<script>
	import _ from 'lodash'
	export default {
		components: {},


		data() {
			return {
				projectId: 0,
				area: '',
				defaultArea: '',
				family: {},
				fileList: [],
				imgUrl: this.$IMG_URL,
				roomTypeId: 0,
				form: {
					position: '',
					roomArea: '',
					roomTypeId: 0,
					province: '',
					city: '',
					district: '',
					pictureUrl: '',
					roomTypeName: ''
				},
				rooms: [],

			};
		},
		async onLoad(option) {
			await this.getType();
			if (option.hasOwnProperty('id')) {
				this.projectId = option.id;
				await this.getFamily(this.projectId);
				uni.setNavigationBarTitle({
					title: '编辑房屋信息'
				})

			} else {
				uni.setNavigationBarTitle({
					title: '新增房屋信息'
				})
			}

		},
		methods: {
			getType() {
				this.$http('room.types').then(r => {
					if (r.code == 200) {
						this.rooms = r.data;
						if (this.rooms.length > 0) {
							this.roomTypeId = this.rooms[0].roomTypeId

						}

					}
				});
			},
			getFamily(id) {
				this.$http('lhouse.query', {
					projectId: id
				}).then(r => {
					if (r.code == 200) {
						this.form.position = r.data.project.position; //详细地址
						this.form.roomArea = r.data.project.roomArea; // 房间大小
						this.form.roomTypeId = r.data.project.roomTypeId;
						this.form.province = r.data.project.province;
						this.form.district = r.data.project.district;
						this.defaultArea = r.data.project.province + '-' + r.data.project.city + '-' + r.data
							.project.district; //你的房屋位置
						this.area = this.defaultArea;
						console.log(this.defaultArea);
						// this.defaultArea='110000-110100-110101';
						//  console.log(this.defaultArea);
						this.form.city = r.data.project.city;
						this.roomTypeId = r.data.project.roomTypeId;
						this.form.roomTypeName = r.data.project.roomTypeName

						r.data.projectPictureList.map(item => {
							this.fileList.push({
								url: item
							})
						})

						console.log('全部房屋数据', r.roomTypeList)
						
					}


				});
			},
			delectPic(index) {

				this.fileList.splice(index, 1);

			},
			getRegion() {
				return new Promise((resolve, reject) => {
					this.$http('common.region', {
						"parentId": this.parentid
					}).then(r => {
						if (r.code == 200) {
							resolve(r.data);
						} else {
							reject(r.msg)
						}
					});
				})

			},
			clickItem(id) {
				this.roomTypeId = id;
			},
			clickType(index) {
				this.type = index;
			},

			success(file) {
				this.fileList.push(file);
			},
			submits() {
				if (this.area.length == 0) {
					this.$u.toast('请选择所在城市省份');
					return;
				} else {
					console.log(this.area);
					let area = this.area.split('-');
					this.form.province = area[0];
					this.form.city = area[1];
					this.form.district = area[2];

				}
				this.form.roomTypeId = this.roomTypeId;
				if (this.form.position == '') {
					this.$u.toast('请填写详细地址');
					return;
				}
				if (this.form.roomArea == '') {
					this.$u.toast('请填写房屋所在面积');
					return;
				}
				if (this.fileList.length == 0 && false) {
					this.$u.toast('请上传房屋面积复诊图片');
					return;
				} else {
					let pic = [];
					this.fileList.map(item => {
						
						pic.push(item.url);
					})
					console.log(pic);
					this.form.pictureUrl = pic.join(',');
					console.log(this.form.pictureUrl);
				}
				if (this.projectId > 0) {
					this.form.projectId = this.projectId;
				}
				this.$http('my.saveHousing', this.form).then(r => {
					if (r.code == 200) {
						this.go('/pages/index/my', true);
					} else {
						console.log(r.msg);
						this.$u.toast(r.msg);
					}
				});






			}
		},
	};
</script>

<style scoped lang="scss">
	.scroll {

		height: calc(100vh - 200rpx);
	}

	.fixed {
		position: fixed;
		bottom: 0rpx;
		right: 0;
		left: 0;
		padding-bottom: 20px;
		background-color: #f6f7f9;
	}

	.image_8 {
		margin-top: 18rpx;
		width: 26rpx;
		height: 16rpx;
	}


	.text-wrapper_1 {
		margin-left: 5px;
		width: 152rpx;
		height: 64rpx;
		/* line-height: 64rpx; */
		background: #f6f7f9;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		/* border: 1px solid #1C62F9; */
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
	}

	.text-wrapper {
		margin-left: 5px;
		width: 152rpx;
		height: 64rpx;
		/* line-height: 64rpx; */
		background: rgba(29, 106, 255, 0.1000);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		border: 1px solid #1C62F9;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1D6AFF;

	}

	.text_9 {
		color: #333333;
		font-size: 24rpx;

	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_4 {
		padding: 20rpx 24rpx 32rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding: 30rpx 24rpx 39rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		margin-top: 20rpx;
		padding: 29rpx 22rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_3 {
		margin-top: 20rpx;
		padding: 29rpx 22rpx 39rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.button {
		margin: 50rpx 8rpx 25rpx;
		// padding: 19rpx 0 31rpx;
		height: 90rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_1 {
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_5 {
		margin-top: 39rpx;
	}

	.group_7 {
		margin-top: 39rpx;

	}

	.group_8 /deep/ .uni-input-input {
		font-size: 28rpx;
	}

	.group_10 {
		margin-top: 42rpx;
	}

	.group_14 {
		margin-top: 24rpx;
	}

	.text_18 {
		margin: 35rpx 0;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
		text-align: left;
	}

	.text_19 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_6 {
		padding-bottom: 39rpx;
		border-bottom: solid 1rpx #eeeeee;
		font-weight: bold;
	}


	.text_3 {
		margin-top: 38rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_8 {
		padding-bottom: 35rpx;
		border-bottom: solid 1rpx #eeeeee;
		font-weight: bold;
	}

	.text_6 {
		margin-top: 21rpx;
		align-self: flex-start;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_7 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_12 {
		margin-top: 32rpx;
	}

	.text_17 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image-wrapper {
		margin-top: 10rpx;
		padding: 72.5rpx 0;
		border-radius: 16rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826949565980065.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 208rpx;
		height: 208rpx;
	}

	.group_15 {
		margin-left: 14rpx;
		padding-top: 10rpx;
		width: 224rpx;
		position: relative;
	}

	.text_2 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin-top: 9rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.text_4 {
		margin-bottom: 6rpx;
		color: #bfbfbf;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		margin-right: 6rpx;
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.view_3 {
		margin-left: 0;
	}

	.text-wrapper_2 {
		margin-left: 16rpx;
		padding: 14rpx 0 22rpx;
		flex: 1 1 152rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.image_11 {
		width: 63rpx;
		height: 63rpx;
	}

	.image_12 {
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.image_13 {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.text_15 {
		color: #333333;
		font-size: 24rpx;

	}
</style>
